<template>
  <div>
    <div class="level">
      <span>当前类目：{{ title }}</span>
      <span class="change-item" @click="$router.back()">更改类目</span>
    </div>
    <div class="basic">
      <h3 class="basic-info">基本信息</h3>
      <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
        <a-form-item label="吉客云商品编号">
          <a-input
              placeholder="请输入"
              v-decorator="['spu.jackyunGoodsId', { rules: [{ required: true, message: '请输入' }] }]"
          />
        </a-form-item>
        <a-form-item label="商品标题">
          <a-input
              placeholder="请输入"
              v-decorator="['spu.name', { rules: [{ required: true, message: '请输入' }] }]"
          />
        </a-form-item>
        <a-form-item label="商品副标题">
          <a-input
              placeholder="请输入"
              v-decorator="['spu.description', { rules: [{ required: true, message: '请输入' }] }]"
          />
        </a-form-item>
        <a-form-item label="发货地">
          <a-input
              placeholder="请输入"
              v-decorator="['spu.feature.departure', { rules: [{ required: false, message: '请输入' }] }]"
          />
        </a-form-item>
        <a-form-item label="商品标签">
          <a-select
              mode="tags"
              :size="size"
              placeholder="多个商品标签，按回车键输入下一个"
              style="width: 100%"
              v-decorator="[
          'spu.tagList',
          { rules: [{ required: false, message: '请输入' }] },
        ]"
          >
          </a-select>
        </a-form-item>
        <a-form-item label="品牌">
          <a-select
              mode="multiple"
              :size="size"
              placeholder="请输入"
              style="width: 100%"
              v-decorator="[
          'spu.brandId',
          { rules: [{ required: false, message: '请输入' }] },
        ]"
          >
            <a-select-option v-for="i in bandList" :key="i.id">
              {{ i.name }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="商品主图" extra="请上传100kb以下的JPG,PNG格式图片,宽高比例必须为1:1,建议尺寸100px*100px">
          <a-upload
              name="file"
              list-type="picture-card"
              class="avatar-uploader"
              :show-upload-list="false"
              :action="uploadApi"
              :headers="{Authorization: `Bearer ${token}`}"
              :before-upload="beforeUpload"
              @change="handleChange"
              :disabled="loading"
              v-decorator="[
          'spu.mainImage',
          { rules: [{ required: true, message: '请上传' }] },
        ]"
          >
            <img v-if="spu.mainImage" :src="spu.mainImage" alt="avatar" class="img-up"/>
            <div v-else>
              <a-icon :type="loading ? 'loading' : 'plus'"/>
              <div class="ant-upload-text"></div>
            </div>
          </a-upload>
        </a-form-item>

        <a-form-item label="上传视频" v-bind="width" extra="非必填，视频必须为mp4格式，并且大小在20M以内">
          <a-upload
              name="file"
              :show-upload-list="false"
              :headers="{Authorization: `Bearer ${token}`}"
              :action="uploadApi"
              :before-upload="beforeVideoUpload"
              @change="handleVideoUploadChange"
              :disabled="videoLoading"
          >
            <a-button type="dashed" class="mb-14" :disabled="videoLoading">
              <a-icon type="upload"/>
              选择视频
            </a-button>
          </a-upload>
          <video v-if="videoUrl" style="width: 300px;display: block;margin-top: 14px;" :src="videoUrl"
                 controls="controls"/>
          <a-button v-if="videoUrl" size="small" @click="deleteVideo">删除视频</a-button>
          <a-input type="hidden" v-decorator="spu.video"/>
        </a-form-item>

        <a-form-item label="轮播图" extra="请上传2M以下的JPG,PNG格式图片,宽高比例建议为1:1,最多10张">
          <div class="clearfix">
            <draggable v-model="fileList" @input="handleInput">
              <!--            <transition-group>-->
              <div v-for="(item,key) in fileList" :key="key" class="upload-item">
                <div class="upload-item-wrap">
                  <img class="upload-img" :src="item.url" alt="">
                  <div class="upload-list-item-actions">
                    <a-icon class="upload-icon" @click="handlePreview(item)" type="eye-o"/>
                    <a-icon class="upload-icon" @click="handleDelete('fileList',key)" type="delete"/>
                  </div>
                </div>
              </div>
            </draggable>
            <div style="float: left">
              <a-upload
                  multiple
                  :headers="{Authorization: `Bearer ${token}`}"
                  :action="uploadApi"
                  list-type="picture-card"
                  :before-upload="beforeUpload"
                  @preview="handlePreview"
                  @change="handleChange1"
                  :show-upload-list="false"
                  :file-list="fileList"
              >
                <div v-if="fileList.length < 10">
                  <a-icon type="plus"/>
                </div>
              </a-upload>
              <a-modal :visible="previewVisible" :footer="null" @cancel="handlePreviewCancel">
                <img alt="example" style="width: 100%" :src="previewImage">
              </a-modal>
            </div>
          </div>
        </a-form-item>
        <a-form-item label="详情图" extra="请上传2M以下的JPG,PNG格式图片,宽高比例建议为1:1,最多20张">
          <div class="clearfix">
            <draggable v-model="contentFileList" @input="handleInput">
              <!--            <transition-group>-->
              <div v-for="(item,key) in contentFileList" :key="key" class="upload-item">
                <div class="upload-item-wrap">
                  <img class="upload-img" :src="item.url" alt="">
                  <div class="upload-list-item-actions">
                    <a-icon class="upload-icon" @click="handlePreview(item)" type="eye-o"/>
                    <a-icon class="upload-icon" @click="handleDelete('contentFileList',key)" type="delete"/>
                  </div>
                </div>
              </div>
            </draggable>
            <div style="float: left">
              <a-upload
                  multiple
                  :headers="{Authorization: `Bearer ${token}`}"
                  :action="uploadApi"
                  list-type="picture-card"
                  :before-upload="beforeUpload"
                  @preview="handlePreview"
                  @change="handleChange2"
                  :show-upload-list="false"
                  :file-list="contentFileList"
              >
                <div v-if="contentFileList.length < 20">
                  <a-icon type="plus"/>
                </div>
              </a-upload>
              <a-modal :visible="previewVisible" :footer="null" @cancel="handlePreviewCancel">
                <img alt="example" style="width: 100%" :src="previewImage">
              </a-modal>
            </div>
          </div>
        </a-form-item>
        <a-form-item label="商品划线价">
          <a-input-number id="inputNumber" :min="0.00" :step="0.01" @change="onChange" v-decorator="[
          'spu.originalPrice',{ rules: [{ required: true, type: 'number', message:'请选择' }],initialValue: 0 }
        ]"/>
          元
        </a-form-item>
        <a-form-item label="基础销量" extra="当前最大可设置为5000">
          <a-input-number id="inputNumber" :min="0.00" @change="onChange" v-decorator="[
          'spu.feature.fakeSales',{initialValue: 0 },
        ]"/>
        </a-form-item>

        <a-form-item label="商品类型">
          <a-radio-group name="radioGroup" v-decorator="[
          'spu.type', { rules: [{ required: true, type: 'number', message:'请选择' }],initialValue: 0 }]">
            <a-radio :value="0">
              千氧
            </a-radio>
            <a-radio :value="1">
              社交新零售
            </a-radio>
            <a-radio :value="2">
              礼品
            </a-radio>
            <a-radio :value="3">
              电商
            </a-radio>
            <a-radio :value="4">
              渠道
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="是否为虚拟商品">
          <a-radio-group name="radioGroup" v-decorator="[
          'spu.isVirtual', { rules: [{ required: true, type: 'number', message:'请选择' }],initialValue: 0 }]">
            <a-radio :value="0">
              不是
            </a-radio>
            <a-radio :value="1">
              是
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="服务保障">
          <a-checkbox-group v-model="curServices" :options="servicesList"/>
        </a-form-item>

        <a-form-item label="排序">
          <a-input-number id="inputNumber" :min="0.00" @change="onChange" v-decorator="[
          'spu.sorts',{ initialValue: 0.00 },
        ]"/>
        </a-form-item>
        <a-form-item label="上下架" extra="SPU下架，SKU也会隐藏。SPU重新上架时，请记得取消SKU的隐藏。">
          <a-radio-group name="radioGroup" v-decorator="[
          'spu.hidden', { rules: [{ required: true, type: 'number', message:'请选择' }],initialValue: 0 }]">
            <a-radio :value="0">
              上架
            </a-radio>
            <a-radio :value="1">
              下架
            </a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item label="可见场景">
          <a-radio-group name="radioGroup" v-decorator="[
          'spu.hideScene', { rules: [{ required: true, type: 'number', message:'请选择' }],initialValue: 0 }]">
            <a-radio :value="-1">
              所有人可见
            </a-radio>
            <a-radio :value="0">
              仅无身份可见
            </a-radio>
            <a-radio :value="1">
              仅千氧可见
            </a-radio>
            <a-radio :value="2">
              仅新零售可见
            </a-radio>
            <a-radio :value="3">
              仅千氧或无身份可见
            </a-radio>
            <a-radio :value="4">
              仅新零售或无身份可见
            </a-radio>
            <a-radio :value="5">
              仅千氧或新零售可见
            </a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item label="运费模板">
          <a-select
              mode="multiple"
              :size="size"
              placeholder="请输入"
              style="width: 100%"
              v-decorator="[
          'spu.freightId',
          { rules: [{ required: true, message: '请输入' }] },
        ]"
          >
            <a-select-option v-for="i in freightList" :key="i.id">
              {{ i.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <div class="basic">
          <h3 class="basic-info">自然属性</h3>
          <a-form-item
              :label="item.name"
              v-for="(item, index) in attributeList"
              :key="'b'+index"
              v-bind="{
            labelCol: { span: 3 },
            wrapperCol: { span: 21 },
        }">
            <a-select :options="item.options" placeholder="请选择" v-model="item.value"/>
            <div v-if="item.visible">
              <a-input v-model="item.option"></a-input>
              <a-button @click="addFn(item)" style="margin-right: 20px">
                添加
              </a-button>
              <a-button @click="cancel(item)">
                取消
              </a-button>
            </div>
            <div v-else>
              <a-button @click="addClick(item)">
                添加选项
              </a-button>
            </div>
          </a-form-item>
        </div>
        <div class="basic">
          <h3 class="basic-info">销售属性</h3>
          <a-form-item
              :label="item.name"
              v-for="(item, index) in specList"
              :key="'b'+index"
              v-bind="{
            labelCol: { span: 3 },
            wrapperCol: { span: 21 },
        }">
            <a-select mode="multiple" :options="item.options" placeholder="可多选" v-model="item.value"/>
            <div v-if="item.visible">
              <a-input v-model="item.option"></a-input>
              <a-button @click="addFn(item)" style="margin-right: 20px">
                添加
              </a-button>
              <a-button @click="cancel(item)">
                取消
              </a-button>
            </div>
            <div v-else>
              <a-button @click="addClick(item)">
                添加选项
              </a-button>
            </div>
          </a-form-item>
        </div>
        <div class="basic">
          <h3 class="basic-info">价格信息</h3>
          <a-table :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" bordered
                   :data-source="dataSource" :columns="columns" :pagination="false" :scroll="{ x:'100%' }">
            <template slot="image" slot-scope="text, record">
              <div class="img-name">
                <img class="show-img" :src="record.image" alt="">
              </div>
            </template>
            <template slot="stockUnit" slot-scope="text, record">
              <div>
                <a-select
                    :size="size"
                    placeholder="请输入"
                    style="width: 100%"
                    v-model="record.stockUnit"
                >
                  <a-select-option v-for="i in unitList" :key="i.id">
                    {{ i.unit }}
                  </a-select-option>
                </a-select>
              </div>
            </template>
          </a-table>
        </div>
        <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
          <a-button type="primary" html-type="submit">
            提交
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script>
import {getBrandList, getCategoryInfo, getFreightList, getSpuEditDetail, getUnitList} from "@/api";
import code from "@/common/code";
import draggable from 'vuedraggable'

export default {
  name: "shop-edit",
  components: {
    draggable,
  },
  data() {
    return {
      showInput: false,
      title: '',
      size: 'default',
      fileList: [],
      contentFileList: [],
      videoLoading: false,
      videoUrl: '',
      skuList: [],
      previewImage: '',
      previewVisible: false,
      formLayout: 'horizontal',
      form: this.$form.createForm(this, {name: 'coordinated'}),
      bandList: [],
      uploadApi: '/admin-api/common/uploadFile',
      loading: false,
      token: localStorage.getItem('token') || '',
      imageUrl: '',
      freightList: [],
      id: '',
      categoryId: '',
      selectedRowKeys: [],
      attributeList: [],
      unitList: [],
      spu: {},
      dataSource: [], //表格的数据源
      categoryValue: '',
      optionValue: '',
      specList: [],
      columns: [
        {
          title: '尺码',
          dataIndex: 'specNames',
          width: 100,
          align: 'left',
        },
        {
          title: '颜色',
          dataIndex: 'specValues',
          width: 100,
          align: 'center',
        },
        {
          title: 'SKU主图',
          dataIndex: 'image',
          width: 100,
          align: 'center',
          scopedSlots: {customRender: 'image'},

        },
        {
          title: 'SKU编号',
          dataIndex: 'id',
          width: 100,
          align: 'center',
        },
        {
          title: '单位',
          dataIndex: 'stockUnit',
          width: 100,
          align: 'center',
          scopedSlots: {customRender: 'stockUnit'},

        },
        {
          title: '吉客云条码',
          dataIndex: 'jackyunSkuId',
          width: 100,
          align: 'center',
        },
        {
          title: '划线价(元)',
          dataIndex: 'originalPrice',
          width: 100,
          align: 'center',
          scopedSlots: {customRender: 'originalPrice'},

        },
        {
          title: '销售价(元)',
          dataIndex: 'shopChannelPrice',
          width: 200,
          align: 'center',
          scopedSlots: {customRender: 'shopChannelPrice'},
        },

      ],
      servicesList: [
        {label: '质量保证', value: 0},
        {label: '48小时发货', value: 1},
        {label: '七天退换', value: 2},
        {label: '正品保证', value: 3},
        {label: '假一赔十', value: 4},
      ],
      curServices: [],
    }
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values);
        }
      });
    },
    addClick(item) {
      item.visible = true
    },
    addFn(item) {
      if (!item.option) {
        this.$message.error('请输入选项')
        return
      }

      if (item.option && item.options.find(i => i.value === item.option)) {
        this.$message.error('此选项已经存在，请不要重复添加')
        return
      }

      item.options.push({
        label: item.option,
        value: item.option
      })
      this.$message.success('添加成功')
      item.option = ''
      item.visible = false
    },
    cancel(item) {
      item.visible = false
    },
    onChange(value) {
    },
    handleInput(a, b, c) {
    },
    deleteVideo() {
      this.videoUrl = ''
      this.form.setFieldsValue({video: ''})
    },
    handleVideoUploadChange(e) {
      if (e.file.status === 'done') {
        if (e.file.response.code === code.SUCCESS) {
          this.videoUrl = e.file.response.value
          this.form.setFieldsValue({video: this.videoUrl})
        } else {
          this.$message.error(e.file.response.message)
        }
        this.videoLoading = false
      }
    },
    beforeVideoUpload(file) {
      const isAllowType = file.type === 'video/mp4'
      if (!isAllowType) {
        this.$message.error('请上传mp4格式视频!')
      }
      const isLtMax = file.size < 100 * 1024 * 1024
      if (!isLtMax) {
        this.$message.error('不得大于100M!')
      }
      return isAllowType && isLtMax
    },
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    handleChange1({fileList}) {
      if (fileList.length > 10) {
        this.$message.error('最多上传10张轮播图')
        return
      }
      let productImages = []
      fileList.forEach((item) => {
        if (item && item.response) {
          productImages.push(item.response.value)
          item.url = item.response.value
        }
      })
      this.fileList = fileList
      this.$forceUpdate()
    },
    handleChange2({fileList}) {
      if (fileList.length > 20) {
        this.$message.error('最多上传20张详情图')
        return
      }
      let productImages = []
      fileList.forEach((item) => {
        if (item && item.response) {
          productImages.push(item.response.value)
          item.url = item.response.value
        }
      })
      this.contentFileList = fileList
      this.$forceUpdate()
    },
    handlePreviewCancel() {
      this.previewVisible = false
    },
    handleChange(e) {
      if (e.file.status === 'done') {
        if (e.file.response.code === code.SUCCESS) {
          this.spu.mainImage = e.file.response.value
          this.$emit('change', this.imageUrl)
        } else {
          this.$message.error(e.file.response.message)
        }
        this.loading = false
      }
    },
    handlePreview(file) {
      this.previewImage = file.url || file.thumbUrl
      this.previewVisible = true
    },
    handleDelete(type, index) {
      this[type].splice(index, 1)
    },
    beforeUpload(file) {
      this.loading = true
      const the = this
      return new Promise((resolve, reject) => {
        const url = window.URL || window.webkitURL
        const img = new Image()
        img.onload = function () {
          const {width, height} = img
          the.loading = false
          // 校验格式
          if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
            the.$message.error('请上传JPG,PNG格式')
            reject(false)
          }

          // 校验大小
          if (file.size > this.maxSize * 1024 * 1024) {
            the.$message.error(`不得大于${this.maxSize}M`)
            reject(false)
          }

          // 校验比例
          if (the.proportion && ratio(width, height).toString() !== the.proportion) {
            the.$message.error('图片比例不正确')
            reject(false)
          }

          // 校验尺寸
          if ((the.fixedWidth && the.fixedWidth !== width) || (the.fixedHeight && the.fixedHeight !== height)) {
            the.$message.error('图片尺寸不正确')
            reject(false)
          }
          resolve(file)
        }
        img.src = url.createObjectURL(file)
      })
    },
    async getBrandListFn() {
      const res = await getBrandList()
      console.log(res)
      this.bandList = res.value
    },
    async getFreightListFn() {
      const res = await getFreightList()
      this.freightList = res.value
    },
    async getUnitListFn() {
      const res = await getUnitList()
      this.unitList = res.value
    },
    async getCategoryInfoFn(editV0) {
      const res = await getCategoryInfo(this.categoryId)
      res.value.specList.map(item => {
        item.options = this.handleOption(item.options)
        item.value = editV0.spec[item.name]
        item.visible = false
        item.option = ''
        return item
      })
      this.specList = res.value.specList
      // if (isEdit) {
      //   this.specChange(false)
      // }
      res.value.attributeList.map(item => {
        item.options = this.handleOption(item.options)
        item.value = editV0.attribute[item.id]
        item.visible = false
        item.option = ''
        return item
      })
      this.attributeList = res.value.attributeList
    },
    handleOption(options) {
      let opt = JSON.parse(options)
      let result = []
      opt.forEach(item => {
        result.push({
          label: item,
          value: item
        })
      })
      return result
    },
    handleEditVO(res) {
      let spec = {}
      let attribute = {}
      // let dataSource = []
      res.spuAttributeList.forEach((item) => {
        attribute[item.id] = item.value
      })
      let specNames = res.skuList[0].specNames.split('@')
      let specNamesLength = specNames.length
      let list = []
      for (let i = 0; i < specNamesLength; i++) {
        list.push([])
      }

      res.skuList.forEach((item) => {
        let specValues = item.specValues.split('@')
        for (let i = 0; i < specValues.length; i++) {
          if (list[i] && list[i].indexOf(specValues[i]) === -1) {
            list[i].push(specValues[i])
          }
        }
        item.hidden = item.hidden === 1
        item.unit = item.stockUnit
        // dataSource.push(item)
      })
      // this.dataSource = dataSource
      for (let i = 0; i < specNames.length; i++) {
        spec[specNames[i]] = list[i]
      }
      res.spuAttributeList.forEach((item) => {
        attribute[item.attributeId] = item.attributeValue
      })
      return {spec, attribute}
    },
    async getSpuEditDetailFn() {
      const res = await getSpuEditDetail(this.$route.query.id)
      console.log(res)
      if (!this.title) {
        this.title = res.value.categoryList[0].title
      }
      this.spu = res.value.spu
      this.curServices = JSON.parse(this.spu.feature).services
      this.dataSource = res.value.skuList
      let fileList = []
      res.value.spu.imageList.split(',').forEach((item, index) => {
        fileList.push({
          uid: -1 - index,
          name: `${index}.png`,
          status: 'done',
          url: item,
          response: {
            value: item,
          },
        })
      })
      this.fileList = fileList

      // 详情图
      let contentFileList = []
      res.value.spu.content.split(',').forEach((item, index) => {
        contentFileList.push({
          uid: -1 - index,
          name: `${index}.png`,
          status: 'done',
          url: item,
          response: {
            value: item,
          },
        })
      })
      this.contentFileList = contentFileList
      this.videoUrl = res.value.spu.video
      this.categoryId = res.value.categoryList[0].id
      this.categoryValue = res.value.spuAttributeList[0].attributeValue
      this.getCategoryInfoFn(this.handleEditVO(res.value))
      this.form.setFieldsValue({
        'spu.jackyunGoodsId': this.spu.jackyunGoodsId,
        'spu.name': this.spu.name,
        'spu.description': this.spu.description,
        'spu.tagList': this.spu.tagList.split(','),
        'spu.feature': JSON.parse(this.spu.feature),
        'spu.isVirtual': this.spu.isVirtual,
        'spu.type': this.spu.type,
        'spu.sorts': this.spu.sorts,
        'spu.brandId': this.spu.brandId,
        'spu.freightId': this.spu.freightId,
        'spu.originalPrice': this.spu.originalPrice,
        'spu.hideScene': this.spu.hideScene,
        'spu.hidden': this.spu.hidden,
        'spu.imageList': this.fileList,
        'spu.content': this.contentFileList,
        'spu.video': this.videoUrl,
      });
    }
  },
  mounted() {
    this.title = this.$route.query.title
    this.id = this.$route.query.categoryId
    this.getBrandListFn()
    this.getFreightListFn()
    this.getUnitListFn()
    if (this.$route.query.id) {
      this.getSpuEditDetailFn()
    }

  }
}
</script>

<style scoped lang="less">
.level {
  margin: 20px 40px;
}

.change-item {
  margin-left: 30px;
  color: #ec6b1e;
  cursor: pointer;
}

.basic {
  margin: 30px 0;

  .basic-info {
    font-size: 14px;
    font-weight: 500;
    width: 100%;
    background-color: #fff;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
  }
}

.img-up {
  width: 100%;
  height: 100%;
}

.upload-item {
  float: left;
  width: 104px;
  height: 104px;
  margin: 0 8px 8px 0;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 8px;

  .upload-item-wrap {
    position: relative;
    width: 100%;
    height: 100%;

    &:hover {
      &::before {
        opacity: 1;
      }

      .upload-list-item-actions {
        opacity: 1;
      }
    }

    &::before {
      position: absolute;
      z-index: 1;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      opacity: 0;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
      content: ' ';
    }

    .upload-list-item-actions {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 10;
      white-space: nowrap;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      opacity: 0;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;

      .upload-icon {
        cursor: pointer;
        font-size: 16px;
        color: #ffffff;
        margin: 0 4px
      }
    }

    .upload-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      overflow: hidden;
      max-width: 100%;
    }
  }
}

.img-name {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.show-img {
  width: 50px;
  height: 50px;
}
</style>